<template>
  <view>
    <!-- 搜索 -->
    <UgoSearch></UgoSearch>
    <!-- 导航标签 -->
    <u-tabs active-color="#eb4450" bar-width="150" :list="list" :is-scroll="false"
     :current="current" @change="change"></u-tabs>
    <view v-if="current===0">
      <view class="goods">
        <navigator :url="`/pages/good-detail/good-detail?goods_id=${item.goods_id}`" v-for="item in goodList" :key="item.goods_id">
          <view class="goods_image">
            <u-image mode="widthFix" :src="item.goods_small_logo||'https://img2.baidu.com/it/u=1852786483,3450763574&fm=253&fmt=auto&app=120&f=JPEG?w=400&h=520'"></u-image>
          </view>
          <view class="goods_infor" >
            <div class="goods_infor_name u-line-2">{{item.goods_name}}</div>
            <div class="goods_infor_price">{{item.goods_price}}</div>
          </view>
        </navigator>
      </view>
    </view>
    <view v-if="current===1">销量的内容</view>
    <view v-if="current===2">价格的内容</view>
  </view>
</template>  

<script>
	export default {
		data() {
			return {
				list: [{
					name: '综合'
				}, {
					name: '销量'
				}, {
					name: '价格',
					count: 5
				}],
				current: 0,
        goodList:[]
			}
		},
    onLoad(option){
      console.log(option);
      this.params={
        query:"",
        cid:option.cid,
        pagenum:1,
        pagesize:10
      },
      this.getGoodList()
    
    },
        // 页面滚动时执行
      onReachBottom () {
        // 判断有没有下一页的数据
        if(this.goodList.length<this.total){
          // 有得话页码+1
          this.params.pagenum++;
          this.getGoodList()
        }else{
          uni.showToast({
            title:'没有数据了',
            icon:'none'
          })
        }
    },
     // 触发下拉刷新时执行
    async  onPullDownRefresh () {
      // 重置页面为1
    this.params.pagenum=1
    this.goodList=[]
    await this.getGoodList()
    // 当页面的数据加载完后停止刷新
    uni.stopPullDownRefresh()
    },

		methods: {
			change(index) {
				this.current = index;
			},
     async getGoodList(){
      const result=await this.$u.get('/goods/search',this.params)
      // console.log(result);
      this.goodList=[...this.goodList,...result.message.goods]
      this.total=result.message.total
      }
		}
	}
</script>

<style lang="scss">
.goods{
  navigator{
    display: flex;
    .goods_image{
      flex: 1;
      padding:15rpx
    }
    .goods_infor{
      flex:3;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .goods_infor_name{}
      .goods_infor_price{
        color: red;
        font-size: 30rpx;
      }
    }
  }
}
</style>